
//初始化图形 连接点位置四周
const ports = {
    groups: {
        top: {
            position: 'top',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
        right: {
            position: 'right',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
        bottom: {
            position: 'bottom',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
        left: {
            position: 'left',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
        },
    },
    items: [
        {
            group: 'top',
        },
        {
            group: 'right',
        },
        {
            group: 'bottom',
        },
        {
            group: 'left',
        },
    ],
}


X6.Graph.registerNode(
    'custom-image',
    {
        inherit: 'rect',
        width: 52,
        height: 52,
        markup: [
            {
                tagName: 'rect',
                selector: 'body',
            },
            {
                tagName: 'image',
            },
            {
                tagName: 'text',
                selector: 'label',
            },
        ],
        attrs: {
            body: {
                stroke: '#5F95FF',
                fill: '#5F95FF',
            },
            image: {
                width: 26,
                height: 26,
                refX: 13,
                refY: 16,
            },
            label: {
                refX: 3,
                refY: 2,
                textAnchor: 'left',
                textVerticalAnchor: 'top',
                fontSize: 12,
                fill: '#fff',
            },
        },
        ports: { ...ports },
    },
    true,
)

X6.Graph.registerNode(
    'custom-polygon',
    {
        inherit: 'polygon',
        width: 66,
        height: 36,
        attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: {
            ...ports,
            items: [
                {
                    group: 'top',
                },
                {
                    group: 'bottom',
                },
            ],
        },
    },
    true,
)
//注册方框
X6.Graph.registerNode(
    'custom-rect',
    {
        inherit: 'rect',
        width: 66,
        height: 36,
        attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: { ...ports },
    },
    true,
)
//注册带人型图像的节点
X6.Graph.registerNode(
    'activity',
    {
        inherit: 'rect',
        markup: [
            {
                tagName: 'rect',
                selector: 'body',
            },
            {
                tagName: 'image',
                selector: 'img',
            },
            {
                tagName: 'text',
                selector: 'label',
            },
        ],
        attrs: {
            img: {
                x: 6,
                y: 6,
                width: 16,
                height: 16,
                xlinkHref:ctx+'/static/antvx6/images/people.png',
            },
            body: {
                rx: 6,
                ry: 6,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
                strokeWidth: 1,
            },

            label: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: { ...ports },
    },
    true,
)

//注册圆形  开始节点
X6.Graph.registerNode(
    'start-node',
    {
        inherit: 'circle',
        attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#00FF00',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: { ...ports },
    },
    true,
)
//注册圆形  结束节点
X6.Graph.registerNode(
    'end-node',
    {
        inherit: 'circle',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#ff0000',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: { ...ports },
    },
    true,
)

//注册选择节点
X6.Graph.registerNode(
    'gateway',
    {
        inherit: 'polygon',
        attrs: {
            body: {
                refPoints: '0,10 10,0 20,10 10,20',
                strokeWidth: 2,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            label: {
                text: '+',
                fontSize: 40,
                fill: '#5F95FF',
            },
        },
        ports: { ...ports },
    },
    true,
)


X6.Graph.registerNode(
    'star',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956C22.602,0.567,25.338,0.567,26.285,2.486z',
        attrs: {
            body: {
                fill: '#ED8A19',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)

X6.Graph.registerNode(
    'heart',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)


X6.Graph.registerNode(
    'smile',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        markup: [
            {
                tagName: 'path',
                selector: 'eye1',
                groupSelector: 'eye',
                attrs: {
                    d:
                        'M24.82,48.678c5.422,0,9.832-6.644,9.832-14.811c0-8.165-4.41-14.809-9.832-14.809s-9.833,6.644-9.833,14.809C14.987,42.034,19.399,48.678,24.82,48.678z',
                },
            },
            {
                tagName: 'path',
                selector: 'eye2',
                groupSelector: 'eye',
                attrs: {
                    d:
                        'M71.606,48.678c5.422,0,9.833-6.644,9.833-14.811c0-8.165-4.411-14.809-9.833-14.809c-5.421,0-9.831,6.644-9.831,14.809C61.775,42.034,66.186,48.678,71.606,48.678z',
                },
            },
            {
                tagName: 'path',
                selector: 'lip',
                attrs: {
                    d:
                        'M95.855,55.806c-0.6-0.605-1.516-0.77-2.285-0.4C81.232,61.29,65.125,64.53,48.214,64.53c-16.907,0-33.015-3.24-45.354-9.123c-0.77-0.367-1.688-0.205-2.284,0.4c-0.599,0.606-0.747,1.526-0.369,2.29c5.606,11.351,25.349,19.277,48.008,19.277c22.668,0,42.412-7.929,48.012-19.279C96.603,57.332,96.453,56.411,95.855,55.806z',
                },
            },
        ],
        attrs: {
            lip: {
                fill: '#E0A31A',
            },
            eye: {
                fill: '#730000',
            },
        },
        ports: { ...ports },
    },
    true,
)



X6.Graph.registerNode(
    'logo',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/img/logo.jpg',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)

X6.Graph.registerNode(
    'qiumoji',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/svg/qiumoji.svg',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)


X6.Graph.registerNode(
    'fan',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/img/fan.gif',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)

X6.Graph.registerNode(
    'channel',
    {
        inherit: 'path',
        width: 60,
        height: 20,
        attrs: {
            body: {
                fill: {
                    connection: true,
                    strokeWidth: 12,
                    strokeLinecap: 'round',
                    fill: 'none',
                    // 渐变使用教程：https://x6.antv.vision/zh/docs/api/registry/attr#fill
                    stroke: {
                        type: 'linearGradient',
                        stops: [
                            { offset: '0%', color: '#d7d8d9' },
                            { offset: '20%', color: '#e4e5e6' },
                            { offset: '40%', color: '#fcfdfe' },
                            { offset: '60%', color: '#fcfdfe' },
                            { offset: '80%', color: '#e4e5e6' },
                            { offset: '100%', color: '#d7d8d9' },
                        ],
                    },
                },
                refD: 'M0,0L142,0L142,18L0,18L0,0z',
            }
        },
        ports: { ...ports },
    },
    true,
)


X6.Graph.registerNode(
    'light',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        attrs: {
            body: {
                fill: '#FFFFFF',
                stroke: '#000000',
                // 指定 refD 属性，pathData 随图形大小自动缩放
                // https://x6.antv.vision/zh/docs/api/registry/attr#refdresetoffset
                refD: 'M0,65.2C0,50.8,11.6,39.2,26,39.2C40.3,39.2,52,50.8,52,65.2C52,65.2,0,65.2,0,65.2z',
            },
        },
        ports: { ...ports },
    },
    true,
)

X6.Graph.registerNode(
    'light2',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        attrs: {
            body: {
                fill: '#FFFFFF',
                stroke: '#000000',
                refD: 'M0,0L24.5,0C38.5,1.9,49,13.8,49,28C49,42.1,38.5,54.1,24.5,56L0,56L0,0z',
            },
        },
        ports: { ...ports },
    },
    true,
)


X6.Graph.registerNode(
    'path2',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        attrs: {
            body: {
                fill: '#efdbff',
                stroke: '#9254de',
                // 指定 d 属性，pathData 不随图形的大小缩放
                d: 'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z',
            },
        },
        ports: { ...ports },
    },
    true,
)
// 注册 HTML 元素

const wrap = document.createElement('div')
wrap.style.width = '100%'
wrap.style.height = '100%'
wrap.style.background = '#f0f0f0'
wrap.style.display = 'flex'
wrap.style.justifyContent = 'center'
wrap.style.alignItems = 'center'
wrap.innerText = 'echart图表占位'
// 注册返回 HTML 元素的函数
X6.Graph.registerHTMLComponent('my-html1',wrap)




//svg风扇
X6.Graph.registerNode(
    'fan_svg',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/svg/fan.svg',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)


//监控
X6.Graph.registerNode(
    'camera',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/svg/camera.svg',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)

//货位指示灯开
X6.Graph.registerNode(
    'light_green',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/svg/light_green.svg',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)
//货位指示灯关
X6.Graph.registerNode(
    'light_gray',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/svg/light_gray.svg',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)

//烟感
X6.Graph.registerNode(
    'yangan',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/img/yangan.png',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)

//水浸
X6.Graph.registerNode(
    'shuijin',
    {
        inherit: 'image',
        width: 60,
        height: 60,
        imageUrl:ctx+'static/antvx6/img/shuijin.png',
        attrs: {
            body: {
                fill: '#D75A4A',
                stroke: 'none',
            }
        },
        ports: { ...ports },
    },
    true,
)

//日照灯
X6.Graph.registerNode(
    'sunlight',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M9.7,19.1C9.7,13.9,13.8,9.6,19,9.6C24.2,9.6,28.3,13.9,28.3,19.1C28.3,22.5,26.6,25.5,23.9,27.2L23.9,32.6C23.9,33.4,23.2,34,22.4,34L15.6,34C14.8,34,14.1,33.4,14.1,32.6L14.1,27.2C11.4,25.5,9.7,22.5,9.7,19.1zM19,26.5C23,26.5,26.2,23.2,26.2,19.1C26.2,15,23,11.7,19,11.7C15,11.7,11.8,15,11.8,19.1C11.8,23.2,15,26.5,19,26.5zM21.8,28.2C20.9,28.4,20,28.6,19,28.6C18,28.6,17.1,28.4,16.2,28.2L16.2,31.9L21.8,31.9L21.8,28.2zM30.8,5.7L28.2,8.3C27.6,8.9,27.6,9.7,28.2,10.3C29.1,11.2,29.9,11.2,30.5,10.7L33.1,8C33.6,7.5,33.6,6.6,33.1,6.1C32.2,5.1,31.3,5.1,30.8,5.7zM9.8,8.3L7.2,5.7C6.7,5.1,5.8,5.1,5.3,5.7C4.4,6.6,4.4,7.5,4.9,8L7.5,10.7C8.1,11.2,8.9,11.2,9.4,10.7C10.4,9.7,10.4,8.9,9.8,8.3zM5,18.3L1.3,18.3C.6,18.3,0,18.9,0,19.7C0,21,.6,21.7,1.3,21.7L5,21.7C5.8,21.7,6.4,21,6.4,20.3C6.4,18.9,5.8,18.3,5,18.3zM36.7,18.3L33,18.3C32.2,18.3,31.6,18.9,31.6,19.7C31.6,21,32.2,21.7,33,21.7L36.7,21.7C37.4,21.7,38,21,38,20.3C38,18.9,37.4,18.3,36.7,18.3zM17.4,1.4L17.4,5.1C17.4,5.9,18,6.5,18.7,6.5C20,6.5,20.6,5.9,20.6,5.1L20.6,1.4C20.6,.6,20,0,19.3,0C18,0,17.4,.6,17.4,1.4z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#cccccc',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)

//圆角矩形
X6.Graph.registerNode(
    'round_react',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M120.7,76C126.9,76,132,70.9,132,64.7L132,11.3C132,5.1,126.9,0,120.7,0L11.3,0C5.1,0,0,5.1,0,11.3L0,64.7C0,70.9,5.1,76,11.3,76L120.7,76z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)

//半圆
X6.Graph.registerNode(
    'half_circle',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M0,60C-0,26.9,26.9,0,60,0C93.1,-0,120,26.9,120,60L0,60z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)

//三角形
X6.Graph.registerNode(
    'triangle',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M0,133L152,133L76,0L0,133z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)


//梯形
X6.Graph.registerNode(
    'trapezoid',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M30.2,0L101.8,0L132,76L0,76L30.2,0z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)

//六边形 hexagon
X6.Graph.registerNode(
    'hexagon',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M120,60L90,112L30,112L0,60L30,8L90,8L120,60z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)



//单向箭头
X6.Graph.registerNode(
    'arrow',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M0,23.6L23.6,0L23.6,14.2L113.4,14.2L113.4,33.1L23.6,33.1L23.6,47.2L0,23.6z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)


//双向箭头
X6.Graph.registerNode(
    'double_arrow',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M0,23.6L23.6,0L23.6,14.2L89.8,14.2L89.8,0L113.4,23.6L89.8,47.2L89.8,33.1L23.6,33.1L23.6,47.2L0,23.6z',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)

//直线
X6.Graph.registerNode(
    'line',
    {
        inherit: 'path',
        width: 60,
        height: 60,
        path:
            'M0,0L180.5,0',
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
            },
        },
        ports: { ...ports },
    },
    true,
)